<template>
  <div class="demo">
    <!-- 漂浮按钮 -->
    <FloatButton class="cart-button" icon="kidslock" bind-counter="goods-cart" message-point-position="righttop">
    </FloatButton>
    <!-- 消息点 -->
    <MessagePoint bind-counter="goods-cart"></MessagePoint>
    <!-- 商品列表 -->
    <GoodsList bind-counter="goods-cart" show-add-cart :data="data" />
    <!-- 添加购物车特效 -->
    <AddCartEffect></AddCartEffect>
  </div>
</template>
<script setup>
import { watchCount, MessagePoint, AddCartEffect, GoodsList, FloatButton } from 'afast-ui'
watchCount('goods-cart', (v) => {
  console.log('购物车数量', v);
})
import { ref } from 'vue'
const goods = ref([{
  title: 'BLEU | CHANEL高端好酒 贵族尊享 送礼佳品',
  price: 2999,
  delPrice: 3999,
  thumb: require('@/assets/goods/1.jpg')
},
{
  title: '康帅傅冰红茶 老人小孩都爱喝',
  price: 3,
  delPrice: 4.3,
  thumb: require('@/assets/goods/2.jpg')
},
{
  title: '国嚼红酒 葡萄酒 新疆乌鲁木齐产高质黑葡萄 匠心酿造九九八十一天',
  price: 2.99,
  delPrice: 234.6,
  thumb: require('@/assets/goods/3.jpg')
},
{
  title: '原装零糖可口可乐 肥仔快乐水 夏日佳品',
  price: 2.99,
  delPrice: 3,
  thumb: require('@/assets/goods/4.jpg')
}])
const data = ref([
  ...goods.value,
  ...goods.value,
  ...goods.value
])
</script>
<style lang="less">
.cart-button {
  width: 80px !important;
  height: 80px !important;
  right: 50px;
  bottom: 50px;
}
</style>